<template>
  <div v-if="liveInfo" class="c-bg-sgray c-pt24 c-pb40 c-ph24">
    <section class="c-bg-white c-br12 c-pt24" :class="moduleType == 1 ? 'c-pb32':'c-pb24'">
      <div class="c-p c-mh24 c-br12 c-text-hidden">
        <img class="c-w100" :src="liveInfo.cover" alt="">
        <div v-if="moduleType == 1" class="c-pa c-p-t0 c-p-l0">
          <LiveStatusTag :liveStatus="liveInfo.status"/>
        </div>
      </div>
      <div class="c-mt16 c-mh24 c-fs28">{{liveInfo.name}}</div>
      <div v-if="moduleType == 1" class="c-hh60 c-flex-row c-flex-center">
        <span class="c-ww32 c-hh32 c-bg-sgray c-brp50 c-translate-x-50"></span>
        <span class="c-bd-b2-f6 c-flex-grow1 c-w0 c-ph16"></span>
        <span class="c-ww32 c-hh32 c-bg-sgray c-brp50 c-translate-x50"></span>
      </div>
      <div v-if="moduleType == 1" class="c-fs24 c-fc-gray c-textAlign-c">直播时间</div>
      <section v-if="moduleType == 1" class="c-flex-row c-flex-center c-pt6">
        <div class="c-flex-column c-flex-center">
          <span class="c-fs48 c-lh64 c-fw-b">{{liveInfo.startHour}}</span>
          <span class="c-pt4 c-fs24 c-fc-gray">{{liveInfo.startDate}}</span>
        </div>
        <div class="c-fs28 c-fc-gray c-ph80">至</div>
        <div class="c-flex-column c-flex-center">
          <span class="c-fs48 c-lh64 c-fw-b">{{liveInfo.endHour}}</span>
          <span class="c-pt4 c-fs24 c-fc-gray">{{liveInfo.endDate}}</span>
        </div>
      </section>
    </section>
    <!-- 当前身份不是讲师 && 不是嘉宾 && 链接已过期 -->
    <div v-if="liveInfo.isTeacher == 0 && liveInfo.isGuest == 0 && liveInfo.urlIsTimeOut == 1" class="c-ww520 c-hh64 c-m-0auto c-br32 c-bg-gray c-fc-white c-fs26 c-fw-b c-flex-row c-flex-center c-mt40">当前邀请链接已过期</div>
    <!-- 当前身份不是讲师 && 不是嘉宾 && 邀请链接是讲师 -->
    <div v-else-if="liveInfo.isTeacher == 0 && liveInfo.isGuest == 0 && inviteRole == 1" @click="clickBindTeacher" class="c-ww520 c-hh64 c-m-0auto c-br32 c-bg-xblue c-fc-white c-fs26 c-fw-b c-flex-row c-flex-center c-mt40">立即绑定为讲师</div>
    <!-- 当前身份不是讲师 && 不是嘉宾 && 邀请链接是嘉宾 -->
    <div v-else-if="liveInfo.isTeacher == 0 && liveInfo.isGuest == 0 && inviteRole == 2" @click="clickBindTeacher" class="c-ww520 c-hh64 c-m-0auto c-br32 c-bg-xblue c-fc-white c-fs26 c-fw-b c-flex-row c-flex-center c-mt40">立即绑定为嘉宾</div>
    <section v-else-if="liveInfo.isTeacher == 1 || liveInfo.isGuest == 1" class="c-bg-white c-br10 c-pt28 c-ph24 c-pb40 c-mt16">
      <div class="c-fs28 c-fw-b">您已是直播间{{liveInfo.isTeacher == 1 ? '讲师':'嘉宾'}}</div>
      <div v-if="liveInfo.pcWebLiveUrl && liveInfo.status < 2" class="c-pt16 c-fs22 c-flex-row c-aligni-center">
        <span class="c-fc-gray c-flex-grow1 c-w0">电脑直播，请复制下方链接到浏览器打开</span>
        <span @click="clickCopyLink" class="c-fc-xblue">复制</span>
      </div>
      <div v-if="liveInfo.pcWebLiveUrl && liveInfo.status < 2" class="c-mt24 c-ph20 c-hh72 c-br8 c-bg-f6 c-fs22 c-flex-row c-aligni-center"><span class="c-text-ellipsis1">{{liveInfo.pcWebLiveUrl}}</span></div>
      <!-- 未绑定手机号下的显示 -->
      <section v-if="isBindMobile != 1" class="c-pt40 c-flex-row c-flex-center">
        <div @click="clickBindMobile" class="c-flex-grow1 c-w0 c-hh64 c-br32 c-flex-row c-flex-center c-fs26 c-fw500 c-bg-f6 c-mr24">先绑定手机号</div>
        <div v-if="liveInfo.status < 2" class="c-flex-grow1 c-w0 c-hh64 c-br32 c-flex-row c-flex-center c-fs26 c-fw500 c-bg-xblue c-fc-white">
          <wxOpenWeapp :path="wxappPath" :pathQuety="wxappQuery">
            <div class="c-w100 c-h c-flex-row c-flex-center">去小程序直播</div>
          </wxOpenWeapp>
        </div>
      </section>
      <!-- 已绑定手机号下的显示，这边特地分开写，因为写一起的话开放标签再绑定手机号后会只有一半能点击 -->
      <section v-if="isBindMobile == 1" class="c-pt40 c-flex-row c-flex-center">
        <div v-if="liveInfo.status < 2" class="c-w100 c-hh64 c-br32 c-flex-row c-flex-center c-fs26 c-fw500 c-bg-xblue c-fc-white">
          <wxOpenWeapp :path="wxappPath" :pathQuety="wxappQuery">
            <div class="c-w100 c-h c-flex-row c-flex-center">去小程序直播</div>
          </wxOpenWeapp>
        </div>
      </section>
    </section>
  </div>
</template>
<script>
import wxOpenWeapp from '@/components/templates/common/wxOpenWeapp.vue';
import LiveStatusTag from '@/components/templates/live/liveStatusTag.vue';
import { mapState } from "vuex";
import { utilJs } from "@/utils/common.js";
export default {
  name: "InviteLiveTeacher",
   components:{
    wxOpenWeapp,
    LiveStatusTag
  },
   computed: {
    ...mapState({
      showBindPhoneModal: (state) => state.oem_store.showBindPhoneModal,
    }),
  },
  watch:{
    showBindPhoneModal(val) {
      if (!val) {
        this.initIsBindMobile();
      }
    }
  },
  data() {
    return {
      moduleType:2,
      inviteRole:2,
      liveInfo:null,
      isBindMobile:1,
      wxappQuery:'',
      wxappPath:'',
    };
  },
  created() {
    this._liveId = this.$route.query.liveId;
    this._code = this.$route.query.code;
    this.inviteRole = this.$route.query.lecturerType || 1; //1讲师 2 嘉宾
    this.moduleType = this.$route.query.moduleType || 1; //1公开课 2直播间
    this._isClicking = false;
    this.getLiveInfo();
    this.setTitleByRole();
  },
  mounted() {

   },
  methods: {
    getLiveInfo() {
       utilJs.getMethod(`${global.apiurl}live/lecturer/getLiveInfo?liveId=${this._liveId}&moduleType=${this.moduleType}&code=${this._code}&isSkeleton=1`, res => {
        let info = res;
        if (!info) {
          return;
        }
        info.startHour = info.startAt && info.startAt.split(' ')[1].substring(0, 5);
        info.startDate = info.startAt && info.startAt.split(' ')[0];
        info.endHour = info.endAt && info.endAt.split(' ')[1].substring(0, 5);
        info.endDate = info.endAt && info.endAt.split(' ')[0];
        info.isTeacher = (info.role == 2 || info.role == 6) && info.subRole == 0 ? 1 : 0;
        info.isGuest = (info.role == 2 || info.role == 6) && info.subRole == 1 ? 1 : 0;
        //直播类型【0=视频录播+社群直播; 1=OBS实时直播; 2=手机直播 (1跟2合并成视频直播); 3=语音直播; 4=PPT直播; 5=PC视频直播; 6=互动视频直播; 7=转播;】
        //视频直播没有pc推流地址
        info.pcWebLiveUrl = info.liveType == 3 || info.liveType == 4 || info.liveType == 6 ? info.pcWebLiveUrl : '';
        const ENV = process.env.VUE_APP_ENV;
        const ENV_MAP = {
          'dev':'isTest=1',
          'sit':'isFormal=1',
          'production':'isProd=1'
        };
        //公开课链接
        let wxappQuery = `${ENV_MAP[ENV]}&liveId=${this._liveId}&userId=${res.userId}`;
        let wxappPath = 'pages/index/index';
        //独立直播间链接
        if (this.moduleType == 2) {
          wxappPath = 'pages/personal/scanCode/index';
          wxappQuery = `${ENV_MAP[ENV]}&liveId=${this._liveId}&userId=${res.userId}&mt=2`;
        }
        this.wxappPath = wxappPath;
        this.wxappQuery = wxappQuery;
        this.initIsBindMobile();
        this.liveInfo = info;
       }, () => {
         this.$routerGo(this, "replace", {
            path: "/",
          });
       });
    },
    //是否绑定了手机号
    initIsBindMobile() {
     this.isBindMobile = localStorage.getItem("uMobile") ? 1 : 0;
    },
    setTitleByRole() {
      let title = '';
     if (this.inviteRole == 1) {
        title = '邀请成为讲师';
      } else if (this.inviteRole == 2) {
        title = '邀请成为嘉宾';
      }
      setDocumentTitle(title);
    },
    clickBindTeacher() {
      if (this._isClicking) {
        return;
      }
      this._isClicking = true;
      let data = {
        liveId:this._liveId,
        moduleType:this.moduleType,
        lecturerType:this.inviteRole
      }
      utilJs.postMethod(`${global.apiurl}live/lecturer/setLecturer`, data, () => {
        this.$showCjToast({
          text: '绑定成功',
          type: 'success'
        });
        this._isClicking = false;
        this.getLiveInfo();
      }, () => {
        this._isClicking = false;
      })
    },
    clickCopyLink() {
      utilJs.copyText(this.liveInfo.pcWebLiveUrl);
    },
    clickBindMobile() {
      utilJs.goBindMobile();
    },
    wechatShare: function () {
      utilJs.wechatConfig('', '', "", "", function () { }, false, { hideAllNonBaseMenuItem: 1, isWxOpenLaunchWeap: 1, });
    },
    },
}
</script>